<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/echarts.min.js"></script>
    <script src="js/jquery-3.3.1.min.js"></script>
    <link rel="stylesheet" href="js/ol.css">
    <script src="js/ol-debug.js"></script>
    <script src="lib/jquery/jquery-3.3.1.min.js"></script>
    <script src="lib/bootstrap/js/bootstrap.js"></script>
    <link rel="stylesheet" href="lib/bootstrap/css/bootstrap.css">
    <style>
        .pop {
            width: 70px;
            height: 20px;
            /*            border: 1px solid #088;
                        border-radius: 10px;*/
            background-color: #0FF;
            opacity: 0.7;
        }
    </style>
</head>
<body>
<div class="pop" style="display: none;">123</div>
<div id="map" style="width: 100%">

</div>
<script>
    var webip="http://localhost:";
    var gisip="http://localhost:";
    var webport="8080/";
    var gisport="8080/";
    /*********************************************************地图初始化**********************************************************/
    /*底图初始化*/
    var format = 'image/png';
    //view
    var view=new ol.View({
        // 设置成都为地图中心
        center: ol.proj.transform([508881,299705],"EPSG:3857","EPSG:3857"),
        zoom: 18
    });
    //var osm=new ol.layer.Tile({source: new ol.source.OSM()});


    var tilePoint = new ol.layer.Tile({
        //visible: false,
        source: new ol.source.TileWMS({
            url: 'http://localhost:8080/geoserver/whuxcy/wms',
            params: {'FORMAT': format,
                'VERSION': '1.1.1',
                tiled: true,
                "STYLES": '',
                "LAYERS": 'whuxcy:point'
                //"exceptions": 'application/vnd.ogc.se_inimage',
                //tilesOrigin: 8176078.237520734 + "," + 704818.0275364731
            }
        })
    });
    var tilePolyline = new ol.layer.Tile({
        //visible: false,
        source: new ol.source.TileWMS({
            url: 'http://localhost:8080/geoserver/whuxcy/wms',
            params: {'FORMAT': format,
                'VERSION': '1.1.1',
                tiled: true,
                "STYLES": '',
                "LAYERS": 'whuxcy:polyline'
                //"exceptions": 'application/vnd.ogc.se_inimage',
                //tilesOrigin: 8176078.237520734 + "," + 704818.0275364731
            }
        })
    });
    var tilePolygon = new ol.layer.Tile({
        //visible: false,
        source: new ol.source.TileWMS({
            url: 'http://localhost:8080/geoserver/whuxcy/wms',
            params: {'FORMAT': format,
                'VERSION': '1.1.1',
                tiled: true,
                "STYLES": '',
                "LAYERS": 'whuxcy:polygon'
                //"exceptions": 'application/vnd.ogc.se_inimage',
                //tilesOrigin: 8176078.237520734 + "," + 704818.0275364731
            }
        })
    });
    /*矢量图层初始化*/
    /////////////////////////////////////
    var pointTypename="xcy:point";
    var pointVectorSource = new ol.source.Vector({
        features:[]
    });
    var pointVectorLayer = new ol.layer.Vector({
        title:"点",
        source: pointVectorSource,
        style: styleFunction,
        renderMode:'image'
    });

    setTimeout(showHeight,2000);
    function showHeight() {
        $.ajax({
            type: "GET",
            url: gisip+gisport+'geoserver/xcy/wfs?service=WFS&version=1.0.0&request=GetFeature&typeName='+pointTypename+'&outputFormat=application%2Fjson&maxFeatures=20',
            dataType:'json',
            success: function(data){
                var features=data.features;
                for(var i=0;i<features.length;i++)
                {
                    var feature=features[i];
                    var ft=new ol.Feature({
                        geometry:new ol.geom.Point(feature.geometry.coordinates),
                        //attr:feature
                    });
                    ft.attr=feature;
                    pointVectorSource.addFeature(ft);
                    var dom=$("<span/>").addClass("pop").html(feature.properties.Text);
                    var overlay= new ol.Overlay({
                        element:dom[0],
                        //element:$(".pop")[0],
                        position:feature.geometry.coordinates,
                        //positioning:"top-left"
                    });
                    map.addOverlay(overlay);
                }
            }

        });
    }
    var fill = new ol.style.Fill({
        color: '#dd942e'
    });
    var stroke = new ol.style.Stroke({
        color: '#cc1000',
        width: 1.25
    });
    function styleFunction(feature) {

        return new ol.style.Style({
            fill:fill,
            stroke:stroke,
            image:new ol.style.Circle({
                radius: 5,
                fill: new ol.style.Fill({
                    color: "#389BCD",
                    opacity: 0.5
                })
            })
        });
    }
    // map
    var map = new ol.Map({
        layers: [
            //tilePoint,
            tilePolyline,
            tilePolygon,
            pointVectorLayer
        ],
        view:view,
        target: 'map',
        renderer:"canvas"
    });
    /*点击事件初始化*/
    var select=new ol.interaction.Select({
        //condition: ol.events.condition.pointerMove,
        layers:[pointVectorLayer],
        multi:true,
        style:function (feature) {
            return st(feature,true);
        }
    });
    select.on("select",function (e) {
        var features=e.selected;
        var feature=features[0];
        /*        var geometry=feature.getGeometry();
         var attribute=  feature.getProperties();
         var temp=attribute["NAME"];
         temp=attribute.NAME;
         var coordinates=geometry.getCoordinates();
         var polygons=geometry.getPolygons();
         var polygon=geometry.getPolygon(0);

         alert(feature.get("NAME"));*/
        var wktformat= new ol.format.WKT();
        alert(feature.getProperties());
        //alert(wktformat.writeGeometry(feature.getGeometry()));
    });
    map.addInteraction(select);

    function  st(feature,isSelect) {

        return  new ol.style.Style({
            fill: fill,
            stroke: new ol.style.Stroke({
                color: '#319FD3',
                width: 1
            }),
            image:new ol.style.RegularShape({
                fill: fill,
                stroke: stroke,
                points: 3,
                radius: 10,
                //rotation: Math.PI / 4,
                angle: 0
            }),
            text: new ol.style.Text({
                text:"asdf",
                font: '12px Calibri,sans-serif',
                fill: new ol.style.Fill({
                    color: '#000'
                }),
                stroke: new ol.style.Stroke({
                    color: 'red',
                    width: 3
                }),
                //textAlign:"left",
                offsetX:"0"
            })
        });
    }

    /*添加要素添加与编辑*/
    var draw = new ol.interaction.Draw({
        source: pointVectorSource,
        type: "Polygon",
        stopClick:true,
        freehand:false
    });
    map.addInteraction(draw);
    draw.setActive(true);
    draw.on("drawend",function (e) {
        draw.setActive(false);
        var feature=e.feature;
        var wktformat= new ol.format.WKT();
        alert(wktformat.writeGeometry(feature.getGeometry()));
    });

/*
    var modify = new ol.interaction.Modify({source: pointVectorSource});
*/
    var modify = new ol.interaction.Modify({
        features: select.getFeatures()//要修改的对象
    });
    map.addInteraction(modify);
    modify.on("modifyend",function (e) {
        var features=e.features.array_;
        var wktformat= new ol.format.WKT();
        alert(wktformat.writeGeometry(features[0].getGeometry()));
    });

    var snap = new ol.interaction.Snap({source: pointVectorSource});
    map.addInteraction(snap);

</script>
</body>
</html>